<template>
    <div class="container">
        <div class="lyecs-table-list-warp" style="margin-bottom: 0">
            <div class="list-table-tool lyecs-search-warp">
                <el-form :model="filterParams">
                    <div class="advanced-search-warp list-table-tool-row" style="margin-bottom: -20px">
                        <div class="simple-form-warp">
                            <div class="simple-form-field">
                                <div class="form-group">
                                    <label class="control-label"><span>搜索客服：</span></label>
                                    <div class="control-container">
                                        <el-input v-model="filterParams.username"></el-input>
                                    </div>
                                </div>
                            </div>
                            <div class="simple-form-field">
                                <el-button type="primary" @click="onSearchSubmit">搜索</el-button>
                            </div>
                        </div>
                    </div>
                </el-form>
            </div>
            <div class="table-container">
                <a-spin :spinning="loading">
                    <div class="table-list">
                        <div @click="selectedChange(index)" class="table-item" v-for="(item,index) in filterState">
                            <div class="zent-badge">
                                <template v-if="extractContent(String(String(item.user.avatar)))=='def'">
                                    <el-avatar class="zent-avatar-image" :src="returnAvatar(item.user.avatar)" />
                                </template>
                                <template v-else>
                                    <el-avatar class="zent-avatar-image" :src="imageFormat(item.user.avatar)" />
                                </template>
                                <StatusDot :flicker="item.status==1" :size="10" :color="item.status==1?'#3ebd00':(item.status==2?'#f44444':'#d0d0d0')" class="dot"></StatusDot>
                            </div>
                            <div class="servant-select-dialog-m_item-content_3qFlV">
                                <div class="servant-select-dialog-m_item-name_1Cf5B">{{ item.user.username }}</div>
                                <div class="servant-select-dialog-m_item-count_2JOT0">
                                    当前接待人数：{{ item.conversation_num }}
                                </div>
                            </div>
                            <div class="zenticon-check-circle">
<!--                                <CheckIcon @selected-change="selectedChange(index)" v-model:selected="item.selected" />-->
                                <CheckIcon  v-model:selected="item.selected" />
                            </div>
                        </div>

                    </div>
                </a-spin>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import { computed, onMounted, reactive, ref, watch } from "vue";
import { message } from "ant-design-vue";
import { useConfigStore } from "@/store/config";
import { BrandFilterParams, BrandFilterState } from "@/types/product/brand";
import { getWaitServantList } from "@/api/im/conversation";
import { extractContent } from "@/utils/util";
import { returnAvatar } from "@/utils/avatar";
import { imageFormat } from "@/utils/format";
import { getAdminUserList } from "@/api/authority/adminUser";
import StatusDot from "@/components/form/src/StatusDot.vue";
import { getTransferList } from "@/api/im/servant";
import CheckIcon from "@/components/form/src/CheckIcon.vue";
import { useUserStore } from "@/store/user";
const userInfo = computed(() => useUserStore().userInfo);
const props = defineProps({
    conversation_id: {
        type: Number,
        default: 0
    }
})
const servant_id = defineModel<Number>("servant_id");
// 基本参数定义
const filterState = ref<BrandFilterState[]>([]);
const loading = ref<boolean>(true);
const total = ref<number>(0);
const filterParams = reactive<BrandFilterParams>({
    //初使化用于查询的参数
    page: 1,
    size: 9999,
    username: ""
});
// 获取列表的查询结果
const loadFilter = async () => {
    loading.value = true;
    try {
        const result = await getTransferList({ ...filterParams });
        filterState.value = result.filter_result;
        filterState.value.forEach((item: any) => {
            item.selected = false;
        });
        total.value = result.total;
        prioritizeAdminId()
    } catch (error: any) {
        message.error(error.message);
    } finally {
        loading.value = false;
    }
};

function prioritizeAdminId() {
    // 先找出匹配的项

    const match = filterState.value.find(item => item.user.admin_id === userInfo.value.admin_id);

    if (match) {
        // 如果找到了匹配项，则从原数组中移除它
        const index = filterState.value.indexOf(match);
        filterState.value.splice(index, 1);

        // 然后将匹配的项添加到数组的开头
        filterState.value.unshift(match);
    }

    return filterState.value;
}

onMounted(() => {
    loadFilter();
});

// 参数查询
const onSearchSubmit = () => {
    loadFilter();
};
// 定义当前选中的项的 ID
const selectedItemId = ref<number>(0);

// 监听 selected 的变化，实现单选功能
const selectedChange = (itemId: number) => {
    if (itemId != 0) {
        let temp = filterState.value[itemId].selected;
        filterState.value.forEach((item: any, index: number) => {
            item.selected = false;
        });
        selectedItemId.value = itemId;
        filterState.value[itemId].selected = !temp;
        servant_id.value = filterState.value[itemId].servant_id;
    }
};

defineExpose({
    loadFilter
});
</script>
<style lang="less" scoped>
.batch {
    margin-top: 20px;
}

.kehu {
    display: flex;
    align-items: center;
    gap: 8px;

    .av {
        min-width: 40px;
        min-height: 40px;
    }

    .title {
        /* 占满剩余宽度 */
        flex-grow: 1;
        /* 文字不换行 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 超出部分显示为省略号 */
        text-overflow: ellipsis;
    }
}

.table-list {
    display: flex;
    flex-direction: column;
    gap: 4px;

    .table-item {
        display: flex;
        align-items: center;
        height: 60px;
        box-sizing: border-box;
        padding: 0 20px;
        cursor: pointer;

        .zent-badge {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            flex: 0 0;
            margin-right: 10px;

            .zent-avatar-image {
                width: 40px;
                height: 40px;
                line-height: 40px;
                border-radius: 50%;
            }

            .dot {
                position: absolute;
                top: 0;
                right: 0;
            }
        }

        .servant-select-dialog-m_item-content_3qFlV {
            flex: 1 1 100%;
            display: flex;

            .servant-select-dialog-m_item-name_1Cf5B {
                color: #222;
                flex: 1;
            }

            .servant-select-dialog-m_item-count_2JOT0 {
                font-size: 12px;
                color: #999999;
                font-weight: 200;
                line-height: 20px;
            }
        }

        .zenticon-check-circle {
            margin-left: 10px;
        }
    }

    .table-item:hover {
        background-color: #f2f2f2;
    }
}
</style>
